<template>
  <div class="image-text-config">
    <div class="image-text-config__item" v-for="(item, index) in imageTextList" :key="`${item.id}-${index}`">
      <span>{{ item.title }}</span>
      <el-button type="primary" link @click="handelSetItem(item, index)">设置</el-button>
    </div>

    <el-dialog v-if="dialogVisible" v-model="dialogVisible" align-center :title="title" width="700" :before-close="handleClose">
      <el-form :model="form" label-width="auto">
        <el-form-item label="案例图片">
          <CustomUpdate :file-list="form.pic" multiple @upload-success="uploadImage" @upload-remove="uploadImageRemove" />
        </el-form-item>
        <el-form-item label="案例视频">
          <CustomUpdate
            :file-list="form.video"
            multiple
            accept="video/*"
            fileType="video"
            item-size="113px"
            @upload-success="uploadVideo"
            @upload-remove="uploadVideoRemove"
          />
        </el-form-item>
        <el-form-item label="文字描述">
          <el-input
            v-model="form.desc"
            type="textarea"
            placeholder="请输入标准描述"
            :maxlength="1000"
            :autosize="{ minRows: 4 }"
            show-word-limit
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="handelSave"> 保存 </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { computed, ref } from "vue";
import { cloneDeep } from "lodash";
import CustomUpdate from "../ImageVideoUpload.vue";
import useFlowStore from "@/store/modules/gkflow.js";

const flowStore = useFlowStore();
const propsConfig = computed(() => {
  return flowStore.selectFormItem?.props?.options || [];
});
const imageTextList = computed(() => {
  const list = flowStore.selectFormItem?.optionsConfig?.imageTextList ?? [];
  if (["SelectInput", "MultipleSelect"].includes(flowStore.selectFormItem?.name)) {
    const options = propsConfig.value.map(item => {
      return {
        id: item,
        title: item
      };
    });
    return [...list, ...options];
  }
  return list;
});

const simpleItem = {
  option: "",
  pic: [],
  video: [],
  file: [],
  desc: ""
};
const form = ref({ ...simpleItem });

const title = ref("");
const currentItem = ref(null);
const handelSetItem = (item, index) => {
  dialogVisible.value = true;
  title.value = item.title;
  currentItem.value = item;
  form.value = cloneDeep(simpleItem);
  form.value.option = item.id;
  form.value.id = item.id;
  form.value.title = item.title;
  if (item.id === "whole") {
    form.value = cloneDeep(flowStore.selectFormItem?.optionsConfig?.globalSimple ?? form.value);
    return;
  }
  const optionSimple = flowStore.selectFormItem?.optionsConfig?.optionSimple ?? [];
  const isHasExtend = optionSimple.findIndex(item => item.option === currentItem.value?.title);
  if (optionSimple.length && isHasExtend !== -1) {
    form.value = cloneDeep(optionSimple[isHasExtend]);
  }
};

const dialogVisible = ref(false);
const uploadImage = data => {
  form.value.pic.push(cloneDeep(data));
};
const uploadImageRemove = index => {
  form.value.pic.splice(index, 1);
};
const uploadVideo = data => {
  form.value.video.push(cloneDeep(data));
};
const uploadVideoRemove = index => {
  form.value.video.splice(index, 1);
};

const handelSave = () => {
  dialogVisible.value = false;
  const newForm = cloneDeep(form.value);
  if (currentItem.value.id === "whole") {
    flowStore.selectFormItem.optionsConfig.globalSimple = newForm;
    dialogVisible.value = false;
    return;
  }
  const optionSimple = flowStore.selectFormItem?.optionsConfig?.optionSimple ?? [];
  const isHasExtend = optionSimple.findIndex(item => item.option === currentItem.value?.title);
  if (!optionSimple.length || isHasExtend === -1) {
    optionSimple.push(newForm);
  } else {
    optionSimple[isHasExtend] = newForm;
  }
  flowStore.selectFormItem.optionsConfig.optionSimple = cloneDeep(optionSimple);
  dialogVisible.value = false;
};
const handleClose = () => {
  dialogVisible.value = false;
};
</script>

<style scoped lang="scss">
@import "@/assets/styles/mixin.scss";
.image-text-config {
  &__item {
    @include flex-center(space-between);
    padding: 10px;
    border-radius: 6px;
    border: 1px solid #ccc;
    & + .image-text-config__item {
      margin-top: 10px;
    }
  }
}
</style>
